import { FC, CSSProperties } from "react";
import "./GlitchText.css";

interface GlitchTextProps {
  children: string;
  speed?: number;
  enableShadows?: boolean;
  enableOnHover?: boolean;
  className?: string;
  multiline?: boolean; // 新增属性，支持多行文本
}

interface CustomCSSProperties extends CSSProperties {
  "--after-duration": string;
  "--before-duration": string;
  "--after-shadow": string;
  "--before-shadow": string;
}

const GlitchText: FC<GlitchTextProps> = ({
  children,
  speed = 0.5,
  enableShadows = true,
  enableOnHover = false,
  className = "",
  multiline = false, // 默认不启用多行
}) => {
  const inlineStyles: CustomCSSProperties = {
    "--after-duration": `${speed * 3}s`,
    "--before-duration": `${speed * 2}s`,
    "--after-shadow": enableShadows ? "-5px 0 red" : "none",
    "--before-shadow": enableShadows ? "5px 0 cyan" : "none",
  };

  const hoverClass = enableOnHover ? "enable-on-hover" : "";

  // 处理多行文本
  const renderMultilineText = () => {
    // 按换行符分割文本
    const lines = children.split("\n");
    return lines.map((line, index) => (
      <div
        key={index}
        className={`glitch ${hoverClass} ${className}`}
        style={inlineStyles}
        data-text={line}
      >
        {line}
      </div>
    ));
  };

  return (
    <>
      {multiline ? (
        renderMultilineText() // 渲染多行文本
      ) : (
        <div
        className={`glitch ${hoverClass} ${className}`}
        style={inlineStyles}
        data-text={children}
        >
          {children}
        </div>
      )}
    </>
  );
};

export default GlitchText;